<template>
  <div>
    <h3>登录</h3>
    <button @click="comName = 'qrcode'">二维码登录</button>
    <button @click="comName = 'username'">账号密码登录</button>
    <button @click="comName = 'phonecode'">验证码登录</button>

    <div>
      <!-- 让这个区域的组件不写死，而是根据你给的名字来显示 -->
      <!-- compoent内部本质上用的也是v-if和v-else -->
      <!-- <keep-alive> 这种代表都缓存 -->
      <!-- <keep-alive include="username,qrcode"> 只缓存username和qrcode -->


      <!-- 这句话的意思是除了phonecode以外，其他所有组件都缓存 -->
      <keep-alive exclude="phonecode">
        <component :is="comName"></component>
      </keep-alive>

      <!-- 如果组件越多，这里写的判断条件就越多，显得代码比较多 -->
      <!-- <qrcode v-if="comName == 'qrcode'" />
      <username v-else-if="comName == 'username'" />
      <phonecode v-else /> -->
    </div>
  </div>
</template>

<script>
import qrcode from './components/qrcode'
import username from './components/username'
import phonecode from './components/phonecode'
export default {
  components: {
    qrcode,
    username,
    phonecode
  },

  data() {
    return {
      comName: 'qrcode'
    }
  },
}
</script>

<style>

</style>